<template>
  <div>
    <el-tabs v-model="activeName" :before-leave="handleClick">
      <el-tab-pane label="客户信息" name="detailInfo">
        <detailInfo ref="detailInfo" :resData="this.resData" :type="this.type" />
      </el-tab-pane>
      <el-tab-pane label="会员信息" name="memberInfo">
        <memberInfo ref="memberInfo" :resData="this.resData" :type="this.type" />
      </el-tab-pane>
      <el-tab-pane label="财务信息" name="financeInfo">
        <financeInfo ref="financeInfo" :customerInfo="this.customerInfo" :type="this.type" />
      </el-tab-pane>
<!--      <el-tab-pane label="介绍人信息" name="introducerInfo">-->
<!--        <introducerInfo ref="introducerInfo" :resData="this.resData" :type="this.type" />-->
<!--      </el-tab-pane>-->
      <el-tab-pane label="潜客信息" name="potentialInfo">
        <potentialInfo ref="potentialInfo" :customerInfo="this.customerInfo" :type="this.type" />
      </el-tab-pane>
      <el-tab-pane label="现有车辆" name="ownvehicle">
        <ownvehicle ref="ownvehicle" :customerInfo="this.customerInfo" :type="this.type" />
      </el-tab-pane>
    </el-tabs>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <AjaxButton type="primary" :click="saveHandler" v-if="addVisable === true">保 存</AjaxButton>
      <el-button @click="cancelHandle">关 闭</el-button>
    </div>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import detailInfo from './tabs/detailInfo.vue';
import ownvehicle from './tabs/ownvehicle.vue';
import memberInfo from './tabs/memberInfo.vue';
import financeInfo from './tabs/financeInfo.vue';
// import introducerInfo from './tabs/introducerInfo.vue';
import potentialInfo from './tabs/potentialInfo.vue';
import moment from 'moment';
import { confirmAction, notifyAction, isFormEmpty } from '@/utils';
import { getOwnerInfo, addOwner, updateOwner } from '@/api/customerRepair/customerInfo/ownerVehicleManagement';

export default {
  name: 'addOwnerPanel',
  components: {
    detailInfo,
    ownvehicle,
    memberInfo,
    financeInfo,
    // introducerInfo,
    potentialInfo
  },
  mixins: [dictionary],
  props: {
    type: {
      type: String,
      default: 'add'
    },
    resData: {
      type: Object,
      default: {}
    }
  },
  data() {
    this.conf = { add: '保 存', edit: '保存' };
    this.saveData = {};
    // 不知道干嘛的 写死为1
    this.itemId = 1;
    return {
      activeName: 'detailInfo',
      flag: false,
      customerInfo: {},
      addVisable: true
    };
  },
  computed: {
    btnText() {
      return this.conf[this.type];
    }
  },
  mounted() {
    // 明细时取消保存按钮
    if (this.type === 'show') {
      this.addVisable = false;
    }
  },
  methods: {
    async handleClick(activeName, oldActiveName) {
      const data = await this.$refs.detailInfo.getData();
      if (activeName != 'detailInfo') {
        this.addVisable = false;
      } else if (activeName === 'detailInfo' && (this.type === 'add' || this.type === 'edit')) {
        this.addVisable = true;
      }
      this.customerInfo = data;
    },
    async saveHandler() {
      const data = await this.$refs.detailInfo.getDataSave();
      data.birthday = data.birthday ? moment(data.birthday).format('YYYY-MM-DD') : null;
      console.log(data);
      data.hobby = data.hobby.join(',');
      const res = await addOwner({ ...data });
      console.log('车主保存');
      console.log(res);
      if (res.resultCode === 200) {
        if (res.errMsg) {
          notifyAction(res.errMsg, 'error');
        } else {
          notifyAction('保存成功');
          this.cancelHandle(true);
        }
      }
    },
    cancelHandle(refesh) {
      this.$emit('close', _.isBoolean(refesh) ? true : false);
    }
  }
};
</script>

<style scoped></style>
